<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="renderer" content="webkit"/>
        <meta name="force-rendering" content="webkit"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="referrer" content="always">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link type="text/css" href="css/style.css?<?php echo time();?>" rel="stylesheet"/>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
          <div class="tvpage sousuo">
              <div class="tvitem sousuo-icon" @click="openSouSuo()">
                  <img class="sousuo-fangdajing" src="image/sousuo.png" />搜索
              </div>
              <div class="tvitem">
                  分享
              </div>
          </div>
          
          <div class="tvpage mokuai">
              <div class="tvitem" v-for="item in mokuaiList" :style="'height:' + mokuaiheight + 'px;'">
                  {{item}}
              </div>
          </div>
          
          <template v-for="item,key in list">
            <legend class="legText">{{item.name}}</legend>
            <div class="tvpage liebiao">
                <div class="tvitem danxiang" v-for="v in item.list">
                    <div v-lazy:background-image="v.vod_pic" :style="'height:' + picheight + 'px;'" class="bgtupian">
                        <div v-if="v.vod_remarks" class="beizhu">{{v.vod_remarks}}</div>
                    </div>
                    <div class="mingcheng">{{v.vod_name}}</div>
                </div>
                <div class="tvitem danxiang" v-for="v in item.list">
                    <div v-lazy:background-image="v.vod_pic" :style="'height:' + picheight + 'px;'" class="bgtupian">
                        <div v-if="v.vod_remarks" class="beizhu">{{v.vod_remarks}}</div>
                    </div>
                    <div class="mingcheng">{{v.vod_name}}</div>
                </div>
                <div class="tvitem danxiang" v-for="v in item.list">
                    <div v-lazy:background-image="v.vod_pic" :style="'height:' + picheight + 'px;'" class="bgtupian">
                        <div v-if="v.vod_remarks" class="beizhu">{{v.vod_remarks}}</div>
                    </div>
                    <div class="mingcheng">{{v.vod_name}}</div>
                </div>
                <div class="tvitem danxiang">
                    <div class="bgtupian" :style="'height:' + picheight + 'px;'" v-lazy:background-image="more_pic">
                    </div>
                    <div class="mingcheng">更多</div>
                </div>
            </div>
          </template>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vuelazy.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
        Vue.use(VueLazyload, {
            error: 'image/defaultbg.jpg',
            loading: 'image/defaultbg.jpg'
        })
        var screenWidth = document.body.clientWidth;
        var screenHeight = document.body.clientHeight;
        var danxiang = ((screenWidth / 6) - 40).toFixed(0);
        var mokuaiWin = ((screenWidth / 4) - 52).toFixed(0);
        
        // apiready = function() {
            var app = new Vue({
              el: '#app',
              data: {
                list: [],
                mokuaiList: ['电影', '电视剧', '综艺', '动漫'],
                page: 1,
                isload: true,
                more_pic: "image/defaultbg.jpg",
                picheight: danxiang * 383 / 270,
                mokuaiheight: mokuaiWin * 100 / 170,
                isScroll: true
              },
              created: function () {
                  var that = this;
                  that.getList();
                  
                  //设置定时器，检测失去焦点
                  setInterval(function() {
                      that.checkJiaoDian();
                  }, 100);
              },
              methods: {
                  openSouSuo: function() {
                      alert('打开搜索层');
                  },
                  autoScroll: function() {
                    var that = this;
                    that.isScroll = false;
                    
                    var bodyTop = $('body').scrollTop();
                    if(bodyTop == undefined) {
                        bodyTop = 0;
                    }
                    var objActive = $(".tvpage .tvitem.tvactive");
                    var objActiveOffset = objActive.offset();
                    //console.log(objActiveOffset.top, screenHeight , objActive.outerHeight(), objActiveOffset.top - (screenHeight - objActive.outerHeight()) / 2, bodyTop)
                    // api.toast({
                    //     msg: screenHeight
                    // })
                    $('html, body').stop(false,true).animate({
                        scrollTop: parseInt(objActiveOffset.top + bodyTop - (screenHeight - objActive.outerHeight()) / 2)
                    }, 200, function() {
                        that.isScroll = true;
                    });
                  },
                  checkJiaoDian: function() {
                      var objActive = $(".tvpage .tvitem.tvactive");
                      if(objActive.length == 0) {
                          $(".tvpage:eq(0) .tvitem:eq(0)").addClass("tvactive");
                      }
                  },
                  evtArrowUp: function() {
                      var that = this;
                      var obj = $(".tvpage .tvitem");
                      //规则是一行6个，先判断本tvpage内有没有上一个元素
                      var rowLen = 6;
                      var objActive = $(".tvpage .tvitem.tvactive");
                      var index = objActive.index();//当前激活状态的index
                      var newIndex = (index - rowLen);
                      if(newIndex > -1) {
                          var newItem = objActive.parent().find(".tvitem:eq(" + newIndex + ")")
                          var newItemLen = newItem.length;
                          if(newItemLen > 0) {
                              obj.removeClass("tvactive");
                              newItem.addClass("tvactive");
                          }
                      } else {
                          //再查找上一个tvpage
                          var prevObj = objActive.parent().prevAll(".tvpage");
                          if(prevObj.length > 0) {
                              var prevObj = $(prevObj[0]);
                              var prevObjItem = prevObj.find(".tvitem").length;
                              
                              var prevObjItemIndex = parseInt(prevObjItem / rowLen) * rowLen + index;
                              if(prevObjItem <= prevObjItemIndex) {
                                  prevObjItemIndex = prevObjItem - 1;
                              }
                              var newItem = prevObj.find(".tvitem:eq(" + prevObjItemIndex + ")")
                              obj.removeClass("tvactive");
                              newItem.addClass("tvactive");
                          }
                      }
                  },
                  evtArrowDown: function() {
                      var that = this;
                      var obj = $(".tvpage .tvitem");
                      //规则是一行6个，先判断本tvpage内有没有下一个元素
                      var rowLen = 6;
                      var objActive = $(".tvpage .tvitem.tvactive");
                      var index = objActive.index();//当前激活状态的index
                      var newIndex = (index + rowLen);
                      
                      
                      var nowHang = Math.ceil((index + 1) / 6);
                      //判断最后一行是否有数据
                      var allIndex = objActive.parent().find(".tvitem").length;
                      var allHang = Math.ceil(allIndex / 6);
                      
                      var newItem = objActive.parent().find(".tvitem:eq(" + newIndex + ")");
                      var newItemLen = newItem.length;
                      
                      if(newItemLen > 0) {
                          obj.removeClass("tvactive");
                          newItem.addClass("tvactive");
                      } else if(allHang > nowHang && newItemLen == 0) {
                          //判断最后一行选中
                          var newItem = objActive.parent().find(".tvitem:eq(" + (allIndex - 1) + ")");
                          obj.removeClass("tvactive");
                          newItem.addClass("tvactive");
                      } else {
                          //再查找下一个tvpage
                          var nextObj = objActive.parent().nextAll(".tvpage");
                          if(nextObj.length > 0) { 
                              var nextObj = $(nextObj[0]);
                              var nextObjItem = nextObj.find(".tvitem").length;
                              
                              var nextObjItemIndex = parseInt((index + 1) % rowLen) - 1;
                              var newItem = nextObj.find(".tvitem:eq(" + nextObjItemIndex + ")")
                              obj.removeClass("tvactive");
                              newItem.addClass("tvactive");
                          }
                      }
                  },
                  evtArrowLeft: function() {
                      var that = this;
                      var obj = $(".tvpage .tvitem");
                      var objActive = $(".tvpage .tvitem.tvactive");
                      var prevObj = objActive.prev();
                      if(prevObj.length > 0) {
                          obj.removeClass("tvactive");
                          prevObj.addClass("tvactive");
                      } else {
                        //查找上一个tvpage的最后一个元素
                        var prevObj = objActive.parent().prevAll(".tvpage");
                        if(prevObj.length > 0) {
                            var prevObj = $(prevObj[0]);
                            var prevObjFindItemLastIndex = prevObj.find(".tvitem").length - 1;
                            var prevObjItem = prevObj.find(".tvitem:eq(" + parseInt(prevObjFindItemLastIndex) + ")");
                            obj.removeClass("tvactive");
                            prevObjItem.addClass("tvactive");
                        }
                      }
                  },
                  evtArrowRight: function() {
                      var that = this;
                      var obj = $(".tvpage .tvitem");
                      var objActive = $(".tvpage .tvitem.tvactive");
                      var nextObj = objActive.next();
                      if(nextObj.length > 0) {
                          obj.removeClass("tvactive");
                          nextObj.addClass("tvactive");
                      } else {
                        //查找下一个tvpage的第一个元素
                        var nextObj = objActive.parent().nextAll(".tvpage");
                        if(nextObj.length > 0) {
                            var nextObj = $(nextObj[0]);
                            var nextObjItem = nextObj.find(".tvitem:eq(0)");
                            obj.removeClass("tvactive");
                            nextObjItem.addClass("tvactive");
                        }
                      }
                  },
                  evtEnter: function() {
                      var that = this;
                      var objActive = $(".tvpage .tvitem.tvactive");
                      objActive.trigger("click");
                  },
                  evtAlt: function() {
                    api.closeWidget({
                        id: 'A6084880487025',     //这里改成自己的应用ID
                        retData: {name:'closeWidget'},
                        silent:true
                    });
                  },
                  keyPress: function(KeyName) {
                    var that = this;
                    //判断页面是否需要滚动
                    if(!that.isScroll) {
                        return false;
                    }
                    switch (KeyName) {
                        case 'KeyUp':
                            that.evtArrowUp();//上
                            break;
                        case 'KeyDown':
                            that.evtArrowDown();//下
                            break;
                        case 'KeyLeft':
                            that.evtArrowLeft();//左
                            break;
                        case 'KeyRight':
                            that.evtArrowRight();//右
                            break;
                        case 'KeyEnter':
                            that.evtEnter();//进入或ok
                            break;
                        case 'KeyAlt':
                            that.evtAlt();//返回
                            break;
                    };
                    //自动滚动
                    that.autoScroll();
                  },
                  startTvControl: function() {
                    var that = this;
                    var tvcontrol = api.require('tvcontrol');
                    tvcontrol.open({
                        coverBack: false,
                        coverHome: false,
                        canClick: false,
                        coverOtherDefault: true
                    }, function(ret, err) {
                        var KeyName = {
                            19:'KeyUp',
                            38:'KeyUp', //Keyboard
                            20:'KeyDown',
                            40:'KeyDown', //Keyboard
                            21:'KeyLeft',
                            37:'KeyLeft', //Keyboard
                            22:'KeyRight',
                            39:'KeyRight', //Keyboard
                            23:'KeyEnter',
                            13:'KeyEnter', //Keyboard
                            4:'KeyAlt',
                            18:'KeyAlt', //Keyboard Alt键
                            27:'KeyAlt', //Keyboard ESC
                            24:'KeyAlt', //Keyboard ESC
                            66:'KeyEnter',
                            111:'KeyAlt'
                        };
                        if(ret.keyCode == 23) {
                            api.toast({
                              msg:"2s后刷新页面"
                            });
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                            return false;
                        }
                        var KeyCode = ret.keyCode;
                        that.keyPress(KeyName[KeyCode]);
                    });
                  },
                  startjianpan: function() {
                    var that = this;
                    //遥控器事件侦听
                    $(document).keydown(function(evt){
                        var KeyName = {
                            19:'KeyUp',
                            38:'KeyUp', //Keyboard
                            20:'KeyDown',
                            40:'KeyDown', //Keyboard
                            21:'KeyLeft',
                            37:'KeyLeft', //Keyboard
                            22:'KeyRight',
                            39:'KeyRight', //Keyboard
                            23:'KeyEnter',
                            13:'KeyEnter', //Keyboard
                            4:'KeyAlt',
                            18:'KeyAlt', //Keyboard Alt键
                            27:'KeyAlt', //Keyboard ESC
                            24:'KeyAlt', //Keyboard ESC
                            66:'KeyEnter',
                            111:'KeyAlt'
                        };
                        evt = evt || window.event;
                        var KeyCode = evt.which || evt.keyCode;
                        that.keyPress(KeyName[KeyCode]);
                        return true;
                    });
                  },
                  tvcontrol: function() {
                      $(".tvitem").hover(function() {
                          $(this).addClass("tvactive");
                      }, function() {
                          $(this).removeClass("tvactive");
                      })
                      //开启上下左右键盘控制
                    //   this.startjianpan();
                    //   this.startTvControl();
                  },
                  getList: function () {
                    var that = this;
                    requestPost('app.php/index/tuijiannew',{_ajax:1, page: that.page}).then(ret=>{
                        if(ret.list.length > 0){
                            if(that.page == 1) {
                              that.list = ret.list;
                            } else {
                              ret.list.map(item=>{
                                  that.list.push(item);
                              })
                            }
                            if(ret.list.length < ret.listRows) {
                                that.isload = false;
                            }
                            
                            that.$nextTick(function () {
                              console.log($(".tvpage").length)
                              console.log($(".tvitem").length)
                              //初始化电视控制数据
                              that.tvcontrol();
                            })
                        } else {
                            that.isload = false;
                        }
                    }).catch(function(e) {
                        
                    });
                },
              }
            })
        // }
        
    </script>
</html>
